<template>
  <div>
    <v-title></v-title>
    <v-search></v-search>
    
    <div>
      <span v-for="item in cateList" :key="item.id">{{ item.catename }}</span>
    </div>
    <!-- banner -->
    <v-banner></v-banner>

    <!-- 布局 -->
    <!-- 首页商品切换 -->
    <div class="goods">
      <span @click="index=0" :class="[index==0?'active':'']">热门推荐</span>
      <span @click="index=1" :class="[index==1?'active':'']">上新推荐</span>
      <span @click="index=2" :class="[index==2?'active':'']">所有商品</span>
    </div>

    <!-- 商品列表展示，应该有三块 -->
    <ul class="goodsUl" v-show="index==0">
      <!-- 2.编程式导航：通过函数，能做逻辑 -->
      <li v-for="item in hotsList" :key="item.id" @click="getDetail(item.id)">
        <img :src="$baseUrl + item.img" />
        <div>
          <h3>{{ item.goodsname }}</h3>
          <span>现价格：￥{{item.price|toFixed(2)}}</span>
          <del>原价格：￥{{item.market_price|toFixed(3)}}</del>
          <button>立即抢购</button>
        </div>
      </li>
    </ul>

    <ul class="goodsUl" v-show="index==1">
      <!-- 2.编程式导航：通过函数，能做逻辑 -->
      <li v-for="item in newList" :key="item.id" @click="getDetail(item.id)">
        <img :src="$baseUrl + item.img" />
        <div>
          <h3>{{ item.goodsname }}</h3>
          <span>现价格：￥{{item.price|toFixed(2)}}</span>
          <del>原价格：￥{{item.market_price|toFixed(3)}}</del>
          <button>立即抢购</button>
        </div>
      </li>
    </ul>

    <ul class="goodsUl" v-show="index==2">
      <!-- 2.编程式导航：通过函数，能做逻辑 -->
      <li v-for="item in allList" :key="item.id" @click="getDetail(item.id)">
        <img :src="$baseUrl + item.img" />
        <div>
          <h3>{{ item.goodsname }}</h3>
          <span>现价格：￥{{item.price|toFixed(2)}}</span>
          <del>原价格：￥{{item.market_price|toFixed(3)}}</del>
          <button>立即抢购</button>
        </div>
      </li>
    </ul>
  </div>
</template>
  
  <script>
import vBanner from "../components/vBanner.vue";
import { getHortgoods, getCate } from "../request/api.js";
//当前这个页面，没有axios，使用的时候，需要引入
import axios from "axios";
export default {
  components: {
    vBanner
  },
  data() {
    return {
      hotsList: [], //热门
      newList: [], //上新
      allList: [], //所有
      index: 0,
      cateList:[],//分类数据
    };
  },
  methods: {
    getDetail(id) {
      //获取到路由对象，上面很多方法，可以进行路由的跳转相关操作
      // console.log(this.$router);
      //编程式导航跳转,跳转到detail页面
      this.$router.push("/detail/" + id);
    },
    getHomeGoods() {
      //并发：axios.all([请求1(),请求2()])
      axios
        .all([getHortgoods(), getCate()])
        .then(res => {
          //处理第一个数据
          if (res[0].data.code == 200) {
            this.hotsList = res[0].data.list[0].content;
            this.newList = res[0].data.list[1].content;
            this.allList = res[0].data.list[2].content;
          } else {
            alert(res[0].data.msg);
          }

          //处理第二个数据
          if (res[1].data.code == 200) {
              this.cateList = res[1].data.list;
          } else {
            alert(res[1].data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
      return;
      getHortgoods()
        .then(res => {
          if (res.data.code == 200) {
            this.hotsList = res.data.list[0].content;
            this.newList = res.data.list[1].content;
            this.allList = res.data.list[2].content;
          } else {
            console.log(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    //页面挂载完成请求数据
    this.getHomeGoods();
  }
};
</script>
  
  <style scoped>
.box {
  height: 2.5rem;
}

.goods {
  height: 0.8rem;
  display: flex;
}
.goods span {
  flex: 1;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.25rem;
  color: orange;
}
.goods span.active {
  background: orange;
  color: #fff;
}

.goodsUl {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.goodsUl img {
  width: 2rem;
}
.goodsUl a,
.goodsUl li {
  border: 1px solid #ccc;
  padding: 10px;
  display: flex;
  margin-bottom: 0.16rem;
}
.goodsUl li img {
  border: 1px solid #ccc;
  border-radius: 4px;
}
.goodsUl li div {
  flex: 1;
  margin-left: 0.2rem;
}
.goodsUl li div h3 {
  font-size: 0.34rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}
.goodsUl li div span,
.goodsUl li div del {
  font-size: 0.24rem;
  display: block;
  margin-bottom: 0.16rem;
}
.goodsUl li div span {
  color: red;
}
.goodsUl li div del {
  color: #ccc;
}
</style>